<template>
	<div class="content" id="content">
		<el-input v-model="input" placeholder="请输入内容" @change="BindActor()"></el-input>
		<!-- <i v-if="this.VDO" class="el-icon-video-camera" :style="{left:windowW/2+'px',top:windowH/2+'px',transform:'rotate(-90deg)'}"></i> -->
		<div :style="{position: 'relative', left:windowW/2+'px', top: windowH/3+'px'}">
			<div class="box" id="ActovDiv" :style="{ transformOrigin:BindYAddX+'px'+' '+BindYAddY+'px',transform:'rotate'+'('+'-'+BindOntheZ+'deg)',left:ChangeX*(1)+'px',top:ChangeY*(1)+'px'}" >
			<div 
		
		
		v-for="(item,index) in list"  :key="index" :style="{left:item.positionX+'px',top:item.positionY+'px'}"  class="div1" :id="item.id" >
			<span>{{item.id}}</span>
			<div class="garden"></div>
		</div>
			
		</div>
		
		 <!-- <el-button :plain="true" @click="GetObjName1" style="width: 100px; height: 25px;">更新内容</el-button>
		<button @click="start">更新内容1</button> -->
		<div style="position: absolute;" v-if="BindList != '' " >
				<div :style="{position:'absolute',left:OneX+'px',top:OneY+'px',transform:'rotate'+'('+1+'deg)',transformOrigin:7.5+'px'+' '+ 24.5+'px'}">
				<span style="color: #FFFFFF;">{{BindList}}</span>
				<div class="garden"></div>
					<div :style="{ transform:'rotate'+'('+'-'+ 0+'deg)',transformOrigin:-1+'px'+' '+0+'px'}">
						<i v-if="this.VDO" id="VODId" class="el-icon-video-camera" :style="{left:X+'px',top:Y+'px',transform:'rotate'+'('+Z+'deg)'}"></i>
					</div>
					
		</div>
			
			
			
		</div>
			
		</div>
		
		
		
		<!-- <i v-if="this.VDO" id="VODId" class="el-icon-video-camera" :style="{left:Y+'px',top:X+'px',transform:'rotate(-90deg)'}"></i> -->
		<div class="coordinate" :style="{top:windowH-280+'px',transform:'rotate'+'('+'-'+BindOntheZ+'deg)'}" >
			<span class="spanx">X</span>
			<span class="spany">Y</span>
		</div>
		<!-- <li @mousedown="move" v-for="(item,index) in list"  :key="index" :style="{left:item.positionX+'px',top:item.positionY+'px'}"></li> -->
		
	</div>
	
</template>

<script>
    export default {
        // inject:['reload'], 
        data() {
            return {
                test: false,
                input: "",
                ViewBody: [
                    'Cube',
                    'CineCameraActor'
                    //  'Sphere',
                    //  'Cylinder',
                    //  'Cone',
                    //  'Plane'
                ],
                objectPathname: '',
                ObjPath: "",
                list: [

                ],
                disX: '',
                disY: '',
                X: 0,
                Y: 0,
                Z: 0,
                CineCameraActorpath: '',
                windowW: '',
                windowH: '',

                // Idon:this.SetTime	
                VDO: false,

                ChangeX: 0,
                ChangeY: 0,
                ChangeZ: 0,
                SourceY: '',
                UpX: '',
                UpY: '',
                tess: '',
                BindOntheX: '',
                BindOntheY: '',
                BindOntheZ: '',
                BindList: '',
                BindYAddY: '',
                BindYAddX: '',
                OneGetVDO: true,
                OneX: '',
                OneY: ''

            };
        },

        mounted() {
            this.getObjectpathname(); // 调用该函数导致控制台报错
            this.GetObjName(1);
            this.GetCineCameraActor(1);
            // setTimeout(this.GetObjName1(),50000)	

            this.SetTime = setInterval(this.start, 100)
                // console.log(this.list)
                // this.SetTimeouton()
        },

        destroyed() { //离开当前页面运行

            window.clearInterval(this.SetTime); //停止更新
        },
        // beforeRouteLeave() {
        // 	console.log(2222222222222222)
        // },


        methods: {

            start() {
                var that = this
                that.GetCineCameraActor(1)
                    // that.GetObjName(2)
                console.log('正在刷新...')
                    // console.log(this.X,this.Y)
                    // that.GetDivWH()

                // console.log(BindYAddY)
                if (this.tess != '') {
                    this.GetObjposition(this.tess, 'RelativeLocation')
                }

            },
            AfterRotation() {
                // let Yall=Math.round(this.BindOntheZ*100)/1000
                let Yall = 0
                if (this.BindOntheZ < 90) {
                    if (this.BindOntheZ <= 45) {
                        this.BindYAddX = this.BindOntheX
                        this.BindYAddY = this.BindOntheY + 20 + 6 * Yall
                    } else {
                        this.BindYAddX = this.BindOntheX - 1.8 * Yall
                        this.BindYAddY = this.BindOntheY + 20 + 6 * Yall
                    }



                } else if (this.BindOntheZ >= 90 && this.BindOntheZ < 180) {
                    if (this.BindOntheZ <= 135) {
                        this.BindYAddY = this.BindOntheY + 20 - Yall
                        this.BindYAddX = this.BindOntheX - Yall
                    } else {
                        this.BindYAddY = this.BindOntheY + 20 - 2 * Yall
                        this.BindYAddX = this.BindOntheX - 1.5 * Yall
                    }

                    // console.log(this.BindOntheY,this.X,'111')
                    // console.log(this.BindOntheX,this.Y,'222')
                    // console.log(this.BindYAddX,this.BindYAddY)


                } else if (this.BindOntheZ >= 180 && this.BindOntheZ < 270) {
                    if (this.BindOntheZ <= 225) {
                        this.BindYAddX = this.BindOntheX + 0.3 * Yall
                        this.BindYAddY = this.BindOntheY + 20 - Yall

                    } else {
                        this.BindYAddX = this.BindOntheX + 1.5 * Yall
                        this.BindYAddY = this.BindOntheY + 20 - Yall

                    }


                } else if (this.BindOntheZ >= 270 && this.BindOntheZ <= 360) {
                    if (this.BindOntheZ <= 315) {
                        this.BindYAddX = (this.BindOntheX) * (1) + Yall
                        this.BindYAddY = (this.BindOntheY) * (-1) + 0.4 * Yall

                    } else {
                        this.BindYAddX = (this.BindOntheX) * (1) + Yall
                        this.BindYAddY = (this.BindOntheY) * (-1) + Yall
                    }

                }
                this.Calculation()
            },

            BindActor() {
                let Shadi = this.list
                    // console.log(Shadi);
                console.log('触发change事件');
                for (let i = 0; i < Shadi.length; i++) {
                    // console.log(Shadi[i])
                    let matchdata = Shadi[i].id.match(this.input)

                    if (matchdata != null) {
                        Shadi.splice(i, 1)
                        this.list = Shadi
                        this.BindList = matchdata.input
                        this.tess = this.GetObjPath(matchdata.input)
                            // let aaa=this.GetObjPath(matchdata.input)
                            // console.log(aaa)
                        this.GetObjposition(this.tess, 'RelativeLocation')
                            // console.log(this.BindList,'1111')
                    }
                }
            },

            GetObjName(n) {
                let Array, BodyName, BodyName1, Position;
                let Array2 = []
                Array = this.objectPathname
                    // console.log(Array)
                for (let i in this.ViewBody) {

                    for (let j in this.objectPathname) {
                        BodyName = Array[j].match(this.ViewBody[i])

                        if (BodyName != null) {

                            let Text = BodyName.input

                            let index = Text.indexOf("k")

                            if (index > 0 || Text.length > 15) {

                                // console.log(Text)	
                                // if(Text == 'CineCameraActor'){
                                this.CineCameraActorpath = this.GetObjPath(Text)
                                    // console.log(this.CineCameraActorpath,'222222222222222')
                                    // }

                            } else {
                                Array2.push(Text)

                                // this.GetObjPath(Text)

                                let ReceiveObjPath = this.GetObjPath(Text)

                                if (ReceiveObjPath != undefined) {
                                    // console.log(222)
                                    this.axios.put('/remote/object/property', {
                                        "objectPath": ReceiveObjPath + ".StaticMeshComponent0",
                                        "PropertyName": "RelativeLocation",
                                        "access": "READ_ACCESS"
                                    }, {
                                        headers: {
                                            'Content-Type': 'application/json'
                                        }
                                    }).then(
                                        (res) => {
                                            Position = res.data.RelativeLocation

                                            // console.log(res.data)
                                            // return res.data.RelativeLocation
                                            if (n == 1) {
                                                this.list.push({
                                                    id: Text,
                                                    positionY: res.data.RelativeLocation.Y / 2,
                                                    positionX: res.data.RelativeLocation.X / 2
                                                        // positionX:res.data.RelativeLocation.Y/3+this.windowW/4,
                                                        // positionY:res.data.RelativeLocation.X/3*(-1)+this.windowH/4
                                                })
                                            } else if (n == 2) {

                                                this.list.splice(i++, 1, {
                                                    id: Text,
                                                    positionY: res.data.RelativeLocation.Y / 2,
                                                    positionX: res.data.RelativeLocation.X / 2
                                                        // positionX:res.data.RelativeLocation.Y/3+this.windowW/4,
                                                        // positionY:res.data.RelativeLocation.X/3*(-1)+this.windowH/4
                                                })

                                                // this.list.splice()
                                            }

                                        },
                                        (err) => {

                                        }
                                    )
                                }
                            }

                        }

                    }

                }
            },

            GetObjposition(ReceiveObjPath, PropertyName) {
                let JSON = '';
                if (PropertyName == 'RelativeLocation') {
                    JSON = "RelativeLocation"
                } else {
                    JSON = "RelativeRotation"
                }

                if (JSON != '') {
                    this.axios.put('/remote/object/property', {
                        "objectPath": ReceiveObjPath + ".StaticMeshComponent0",
                        "PropertyName": JSON,
                        "access": "READ_ACCESS"
                    }, {
                        headers: {
                            'Content-Type': 'application/json'
                        }
                    }).then(
                        (res) => {
                            // console.log(res.data.RelativeLocation)
                            // console.log(res.data.RelativeRotation)
                            // console.log(typeof(JSON))

                            if (JSON == "RelativeLocation") {
                                this.BindOntheY = res.data.RelativeLocation.Y / 2,
                                    this.BindOntheX = res.data.RelativeLocation.X / 2,
                                    this.GetObjposition(this.tess)
                                    // console.log('1111111')

                                if (this.OneGetVDO) {
                                    this.OneY = res.data.RelativeLocation.Y / 2,
                                        this.OneX = res.data.RelativeLocation.X / 2
                                    this.OneGetVDO = false
                                }

                            } else if (JSON == "RelativeRotation") {
                                this.BindOntheZ = res.data.RelativeRotation.Yaw
                                JSON = ''
                                this.AfterRotation()
                            }

                        },
                        (err) => {

                        }
                    )
                }
            },

            getObjectpathname() {
                this.windowW = window.innerWidth
                    // this.windowH=window.innerHeight
                    // let windd=window.scrollWidth

                // 获取 content 父元素可视窗口的高度
                this.windowH = document.getElementById("content").parentElement.clientHeight
                    // this.windowW=document.getElementById("content").clientWidth
                    // let ads=document.getElementById("content").clientWidth


                // console.log(this.windowH,this.windowW)

                // 获取远程服务器中的返回值
                let Text = this.$store.state.objectPath.ReturnValue;
                console.log(this.$store.state.objectPath);
                // let  value2=this.$store.state.value2
                // let Text2=this.$store.state.objectPath.ReturnValue[1];

                // 取出返回值中的第一个元素
                let Textone = Text[0]
                    // 获取 PersistentLevel 的索引位置
                let IndexOfPsl = Textone.indexOf('PersistentLevel')

                // let IndexOfPsl2=cctv.indexOf(':')
                // let Projectsource =this.$store.state.properties;
                // let test2=Text[0].length

                let slicename = ''
                let objectPathname = []
                let inputtex2, IndexOfString2, index, inputtex, IndexOfString, i2;

                // 遍历 Text 数组
                for (let i in Text) {
                    // 遍历 Text 对象
                    inputtex = Text[i]
                    IndexOfString = inputtex.indexOf(':')
                    inputtex = inputtex.slice(0, IndexOfString)
                    i2 = Number(i) + 1

                    if (i2 < Text.length) {
                        inputtex2 = Text[i2]
                        IndexOfString2 = inputtex2.indexOf(':')
                        inputtex2 = inputtex2.slice(0, IndexOfString2)
                    }
                    if (inputtex != inputtex2 && inputtex2 != undefined) {
                        index = i
                    }
                    if (index == undefined || index == i) {
                        slicename = Text[i].slice(IndexOfPsl + 16, 120)
                        objectPathname.push(slicename)
                    } else if (i > index) {
                        slicename = Text[i].slice(IndexOfString2 + 17, 120)
                        objectPathname.push(slicename)
                    }
                }

                this.objectPathname = objectPathname
            },

            GetObjPath(name) {
                let Text = this.$store.state.objectPath.ReturnValue;
                let ObjPath, ObjPath1, Slicentail;

                for (let i in Text) {
                    ObjPath = Text[i].match(name)
                    let index = name.indexOf("_")
                    if (index < 0 && ObjPath != null) {
                        ObjPath1 = ObjPath.input
                        break
                    }
                    if (ObjPath != null) {
                        2
                        ObjPath1 = ObjPath.input

                        index = ObjPath1.indexOf('_')
                        Slicentail = ObjPath1.slice(index - 4)
                        if (name.length >= Slicentail.length) {
                            ObjPath1 = ObjPath.input
                            break
                        }

                    }

                }

                return ObjPath1

            },

            GetCineCameraActor(two) {
                let json, age;
                if (two == 1) {
                    json = "RelativeLocation"

                } else {
                    json = two

                }

                if (json != '' && this.CineCameraActorpath != '') {
                    this.axios.put('/remote/object/property', {
                        "objectPath": this.CineCameraActorpath + ".SceneComponent",
                        // "objectPath": '/Game/NewMap.NewMap:PersistentLevel.CineCameraActor_0',
                        "PropertyName": json,
                        "access": "READ_ACCESS"
                    }, {
                        headers: {
                            'Content-Type': 'application/json'
                        }
                    }).then(
                        (res) => {
                            if (json == "RelativeLocation") {
                                //400 36
                                // res.data.RelativeLocation.X/2+400
                                // let testX=res.data.RelativeLocation.Y/3+this.windowW/2 - this.Y
                                age = this.SourceY
                                    // if(res.data.RelativeLocation.Y/3+this.windowW/2 != this.Y  ){
                                    // 	console.log(res.data.RelativeLocation.Y/3+this.windowW/2,this.Y)
                                    // 	// this.ChangeY=Math.round(res.data.RelativeLocation.Y/3+this.windowW/2 - this.Y) 
                                    // }
                                    // else if(res.data.RelativeLocation.X/3*(-1)+this.windowH/2-200  != this.X ){
                                    // 	this.ChangeX=Math.round(res.data.RelativeLocation.X/3*(-1)+this.windowH/2-200 -this.X) 
                                    // }

                                this.SourceY = res.data.RelativeLocation.Y

                                // this.GetDivWH()
                                // console.log(1)
                                this.Y = res.data.RelativeLocation.Y / 2,
                                    this.X = res.data.RelativeLocation.X / 2
                                    // this.X=res.data.RelativeLocation.Y/3
                                    // this.Y=res.data.RelativeLocation.X/3*(-1)
                                    // if(this.OneGetVDO){
                                    // 	this.OneY=res.data.RelativeLocation.Y/2,
                                    // 	this.OneX=res.data.RelativeLocation.X/2
                                    // 	this.OneGetVDO=false
                                    // }


                                // console.log(this.ChangeY)

                                this.GetCineCameraActor('RelativeRotation')


                            } else {

                                this.Z = res.data.RelativeRotation.Yaw
                                    // console.log(this.Z)
                                this.VDO = true
                            }


                        },
                        (err) => {
                            // console.log(22222)
                        }
                    )

                }

            },

            async Calculation() {
                // let ActovDiv=document.getElementById("ActovDiv").style.left
                // let ActovDiv2=document.getElementById("ActovDiv").style.top
                // console.log(ActovDiv,ActovDiv2)
                // let indexofActdiv= ActovDiv.indexOf('px')
                // let indexofActdiv= parseInt(ActovDiv)
                // let sliceActdiv=ActovDiv.slice(0,indexofActdiv)

                // let indexofActdiv2=parseInt(ActovDiv2) 

                this.ChangeX = Math.round(this.OneX - this.BindOntheX)
                this.ChangeY = Math.round(this.OneY - this.BindOntheY)

                // console.log(this.ChangeX,this.ChangeY,this.X,this.Y)
                // console.log(this.ChangeX,this.ChangeY)

            },

            GetDivWH() {
                let ActovDiv = document.getElementById("ActovDiv").style.left

                this.UpX = Math.floor(this.X - 445) * 1.2
                this.UpY = Math.floor(this.Y - 384) * 1.2
                let jioadu = (this.Z + 90) * 0.017453293
                let Cos = Math.round(Math.cos(jioadu) * 1000) / 1000
                let Sin = Math.round(Math.sin(jioadu) * 1000) / 1000
                let a = this.X * Cos - this.Y * Sin
                let b = this.Y * Cos + this.X * Sin
                    //console.log(a,b)
                    // console.log(this.X,this.Y,this.UpX,this.UpY)
                    // console.log(ActovDiv)
                    // console.log(Cos,Sin,this.Y,this.X,jioadu,a,b)

            },

            down(e) {
                // this.flags = true; //是否开启拖拽
                // var touch;
                // if (event.touches) {
                //   touch = event.touches[0];
                // } else {
                //   touch = event;
                // }
                // this.position.x = touch.clientX;
                // this.position.y = touch.clientY;
                // this.dx = moveDiv.offsetLeft;
                // this.dy = moveDiv.offsetTop;
                let odiv = e.target; //获取目标元素
                // console.log(odiv)
                // //算出鼠标相对元素的位置
                this.disX = e.clientX - odiv.offsetLeft;
                this.disY = e.clientY - odiv.offsetTop;
                console.log(this.disX, this.disY)
                console.log(odiv.offsetLeft, odiv.offsetTop)
            },

            move(e) {
                let odiv = e.target; //获取目标元素
                console.log(odiv)
                    // //算出鼠标相对元素的位置
                    // let disX = e.clientX - odiv.offsetLeft;
                    // let disY = e.clientY - odiv.offsetTop;
                    // document.onmousemove = (e)=>{       //鼠标按下并移动的事件
                    //     //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
                let left = e.clientX - this.disX;
                let top = e.clientY - this.disY;

                //绑定元素位置到positionX和positionY上面
                this.positionX = top;
                this.positionY = left;

                //移动当前元素
                odiv.style.left = left + 'px';
                odiv.style.top = top + 'px';
                // };
                // document.onmouseup = (e) => {
                //     document.onmousemove = null;
                //     document.onmouseup = null;
                // };

                console.log("2", left, top)
            },

            end(e) {
                // console.log('3',e)
            }
        }
    }
</script>

<style scoped>
    * {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    
    .content {
        width: 100%;
        height: 100%;
        /* position: relative; */
    }
    
    .box {
        /* width: 370px;
	  height: 300px; */
        position: absolute;
        background-color: blue;
        /* width: 100px;
	  height: 100px; */
        /* transform:rotate(150deg) ; */
        /* left: 300px;
	  top: 300px; */
    }
    
    .div1 {
        position: absolute;
        top: 100px;
        left: 100px;
        /* cursor: move; */
    }
    
    .div1 span {
        color: #F0F8FF;
        font-size: 12px;
    }
    
    .garden {
        width: 15px;
        height: 15px;
        background-color: #00FFFF;
        border-radius: 20px;
    }
    
    .el-icon-video-camera {
        color: red;
        position: absolute;
        font-size: 40px;
    }
    
    .el-icon-top {
        color: #FFFFFF;
        font-size: 40px;
    }
    
    .coordinate {
        position: relative;
        width: 40px;
        height: 40px;
        border-left: 2px solid green;
        border-top: 2px solid red;
        left: 50px;
        transform: rotate(45deg);
    }
    
    .spanx {
        position: absolute;
        color: red;
        left: 30px;
        top: 0px;
        font-size: 12px;
    }
    
    .spany {
        position: absolute;
        color: green;
        top: 25px;
        font-size: 14px;
        left: 2px;
    }
    
    .el-input {
        width: 100px;
        height: 40px;
    }
</style>